<template>
  <div class="containner mtop-20"
       v-if='list.album'>
    <div class=" f-left mleft-10">
      <img v-lazy="list.album.picUrl"
           class="img-140 br-6   ">
      <p class="fs-12 c mtop-10">{{ list.album.publishTime |dateFormat}}</p>
    </div>
    <div class="right mleft-60 f-left">
      <div class="header">
        <span class="fsize-b f-left">{{ list.album.name }}</span>
        <div class="f-left mleft-20 ss">
          <span><i class="iconfont icon-play"></i></span>
          <span class="mleft-10 icon ">|</span>
          <span class="mleft-25"><i class="iconfont icon-wenjian"></i></span>
        </div>
      </div>
      <div class="list mtop-20">
        <el-table style="width: 100%"
                  :data="disList"
                  size="mini"
                  stripe
                  :show-header="false">
          <el-table-column type="index"
                           width="50">
          </el-table-column>
          <el-table-column width="27">
            <i class="iconfont icon-aixin"></i>
          </el-table-column>
          <el-table-column type="index"
                           width="50">
            <i class="iconfont icon-cangpeitubiao_xiazaipandiandanxiazaidayinmoban"></i>
          </el-table-column>
          <el-table-column prop="name"
                           show-overflow-tooltip
                           label="音乐标题">
          </el-table-column>
          <el-table-column prop="dt"
                           label="时长"
                           min-width="16%">
            <template v-slot="scope">
              {{ (scope.row.dt)|timeFormat }}
            </template>
          </el-table-column>
        </el-table>
        <div class="show f-right"
             v-show="!showAll &&total>10">
          <button class="no-btn mtop-10"
                  @click="showAll = true">查看全部{{ total  }}首<i class="el-icon-arrow-right"></i></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
    }
  },
  data () {
    return {
      showAll: false
    }
  },
  computed: {
    disList () {
      if (!this.showAll) {
        return this.list.songs.slice(0, 10)
      } else {
        return this.list.songs
      }
    },
    total () {
      return this.list.songs.length
    }
  },
  methods: {
    disPlayAll () {
      this.showAll = true
    },
  }
}
</script>

<style scoped lang="less">
.ss {
  position: relative;
  .iconfont {
    font-size: 20px;
  }
  .icon {
    color: #ccc;
    margin-top: -5px;
  }
  .icon {
    position: absolute;
    top: 6px;
    height: 15px;
    color: #e5e5e5;
  }
}
.right {
  min-height: 190px;
}
.list {
  display: inline-block;
  width: 1000px;
  td {
    padding: 0;
  }
}
/deep/.el-table::before {
  /* 去除下边框 */
  height: 0;
}
/* 去掉表格下边框 */
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell .is-leaf {
  border: none;
}
/* 去掉上面的线 */
/deep/.el-table th.is-leaf {
  border: none;
}

// 鼠标经过颜色改为粉红色
/deep/.el-table__body tr:hover > td {
  background-color: #f2f2f3 !important;
}
</style>